<template lang="pug">
  .origin-order
    .origin-title 原始工单
    .order-btn
      el-button(type="primary" icon="iconfont icon-daochu" @click="exportFn($route.params&&$route.params.id)") 导出
    .order-main(ref="ordermain")
      .title 工单
      .content
          .content-view
            .index
              div(v-for="item in preIndex") {{item}}
            pre(ref="pre") {{text}}

</template>
<script>
import { originOrderSeq, originOrder } from '@/api/order.js'
export default {
  data () {
    return {
      text: null,
      preIndex: null
    }
  },
  created () {
    const id = this.$route.params && this.$route.params.id
    this.fetchData(id)
  },
  methods: {
    fetchData (id) {
      originOrderSeq(this.$http, id).then(res => {
        this.text = res.data.data.message
        this.preIndex = this.text.match(/\n/g) && this.text.match(/\n/g).length + 1
      })
    },
    exportFn (orderSequence) {
      window.location.href = originOrder + orderSequence
    }
  }
}
</script>
<style lang="stylus" scoped>
.origin-order
  font-size 14px
  padding-bottom 23px
  .origin-title
    height 40px
    line-height @height
    padding 0 20px
    border-bottom 1px solid #e8e8e8
    color #333
  .order-btn
    padding 15px 23px
    >>>
      .iconfont
        font-size 15px
        margin-right 4px
  .order-main
    margin 0 23px
    background-color: #f9fafe;
    border-radius: 4px;
    border: solid 1px #dcdcdc;
    .title
      height 40px
      line-height 40px
      padding 0 15px
      background #ecf2f9
    .content
      .content-view
        display flex
        .index
          width 28px
          flex 0 0 28px
          background #f4f6fc
          color #666
          line-height 25px
          text-align right
          padding-right 6px
        pre
          flex 1
          font-family: MicrosoftYaHei
          font-size 14px
          color #666
          line-height 25px
          padding-left 12px
          overflow-x auto
</style>
